<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶3：初始渲染的过渡</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<style type="text/css">
    .custom-appear-active-class {
		animation: bounce-in .5s;
	}
	@keyframes bounce-in {
	  0% {
	    transform: scale(0);
	  }
	  50% {
	    transform: scale(1.5);
	  }
	  100% {
	    transform: scale(1);
	  }
	}	
	</style>
</head>
<body>
	<div id="app">
		<h3>初始渲染的过渡</h3>
		<transition
			appear
			appear-class="custom-appear-class"
			appear-active-class="custom-appear-active-class">
			<p>demo</p>
		</transition>
	</div>

	<script type="text/javascript">
		// 在demo2中演示的都是初始化之后的dom的变化过渡效果，如果想让dom在初始化时
		// 就渲染过渡的效果，可以通过 appear 属性设置
		var vm = new Vue({
			el: '#app',
		})
	</script>
</body>
</html>